// @ts-ignore
import { Scene, WindLayer, PointLayer } from '@antv/l7';
import { GaodeMap } from '@antv/l7-maps';
import * as React from 'react';
import * as dat from 'dat.gui';

export default class WindMap extends React.Component {
  // @ts-ignore
  private scene: Scene;
  private gui: any;

  public componentWillUnmount() {
    if (this.gui) {
      this.gui.destroy();
    }
    this.scene.destroy();
  }

  public async componentDidMount() {
    const scene = new Scene({
      id: 'map',
      stencil: true,
      map: new GaodeMap({
        center: [105, 35],
        pitch: 0,
        style: 'normal',
        zoom: 4,
      }),
    });
    this.scene = scene;

    const styleOptions = {
      uMin: -21.32,
      uMax: 26.8,
      vMin: -21.57,
      vMax: 21.42,
      numParticles: 65535 / 2,
      fadeOpacity: 0.996,
      rampColors: {
        0.0: '#3288bd',
        0.1: '#66c2a5',
        0.2: '#abdda4',
        0.3: '#e6f598',
        0.4: '#fee08b',
        0.5: '#fdae61',
        0.6: '#f46d43', // f46d43
        1.0: '#d53e4f',
      },
      sizeScale: 1,
    };

    // const pointLayer = new PointLayer({ zIndex: 1 })
    //   .source(
    //     [
    //       {
    //         lng: 121.107846,
    //         lat: 30.267069,
    //       },
    //     ],
    //     {
    //       parser: {
    //         type: 'json',
    //         x: 'lng',
    //         y: 'lat',
    //       },
    //     },
    //   )
    //   .shape('circle')
    //   .color('#f00')
    //   .active(true)
    //   .size(40)
    //   .style({
    //     stroke: '#fff',
    //     storkeWidth: 2,
    //   });

    scene.on('loaded', () => {
      // scene.addLayer(pointLayer);
      fetch(
        'https://gw.alipayobjects.com/os/basement_prod/d2e0e930-fd44-4fca-8872-c1037b0fee7b.json',
      )
        .then((res) => res.json())
        .then((maskData) => {
          const layer = new WindLayer({
            mask: true,
            maskfence: maskData,
            // maskColor: '#fff',
            // maskOpacity: 0.5,
          });
          layer
            .source(
              'https://gw.alipayobjects.com/mdn/rms_23a451/afts/img/A*wcU8S5xMEDYAAAAAAAAAAAAAARQnAQ',
              {
                parser: {
                  type: 'image',
                  // extent: [-180, -85, 180, 85],
                  extent: [70, 16, 136, 54],
                },
              },
            )
            .animate(true)
            .style({
              uMin: styleOptions.uMin,
              uMax: styleOptions.uMax,
              vMin: styleOptions.vMin,
              vMax: styleOptions.vMax,
              fadeOpacity: styleOptions.fadeOpacity,
              numParticles: styleOptions.numParticles,
              rampColors: styleOptions.rampColors,
              sizeScale: styleOptions.sizeScale,
            });
          scene.addLayer(layer);

          /*** 运行时修改样式属性 ***/
          const gui = new dat.GUI();
          this.gui = gui;

          const pointFolder = gui.addFolder('风场数据');
          pointFolder
            .add(styleOptions, 'numParticles', 0, 65535, 1)
            .onChange((num: number) => {
              layer.style({
                numParticles: num,
              });
            });

          pointFolder
            .add(styleOptions, 'uMin', -100, 100, 1)
            .onChange((num: number) => {
              layer.style({
                uMin: num,
              });
            });

          pointFolder
            .add(styleOptions, 'uMax', -100, 100, 1)
            .onChange((num: number) => {
              layer.style({
                uMax: num,
              });
            });

          pointFolder
            .add(styleOptions, 'vMin', -100, 100, 1)
            .onChange((num: number) => {
              layer.style({
                vMin: num,
              });
            });

          pointFolder
            .add(styleOptions, 'vMax', -100, 100, 1)
            .onChange((num: number) => {
              layer.style({
                vMax: num,
              });
            });

          pointFolder
            .add(styleOptions, 'fadeOpacity', 0.9, 1, 0.01)
            .onChange((num: number) => {
              layer.style({
                fadeOpacity: num,
              });
            });

          pointFolder
            .add(styleOptions, 'sizeScale', 0, 2, 0.01)
            .onChange((num: number) => {
              layer.style({
                sizeScale: num,
              });
            });

          pointFolder
            .addColor(styleOptions.rampColors, '0.6')
            .onChange((color: string) => {
              layer.style({
                rampColors: {
                  0.0: '#3288bd',
                  0.1: '#66c2a5',
                  0.2: '#abdda4',
                  0.3: '#e6f598',
                  0.4: '#fee08b',
                  0.5: '#fdae61',
                  0.6: color,
                  1.0: '#d53e4f',
                },
              });
            });
        });
    });
  }

  public render() {
    return (
      <>
        <div
          id="map"
          style={{
            position: 'absolute',
            top: 0,
            left: 0,
            right: 0,
            bottom: 0,
          }}
        />
      </>
    );
  }
}
